import { fetchTopics } from '@/services/topics';
import { Button, Canvas, Icon, Navigator, Picker, Progress, Text, View } from '@tarojs/components';
import Taro, { useLoad, useRouter } from '@tarojs/taro';
import { useEffect, useRef } from 'react';
import './index.scss';

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.');
  });

  useEffect(() => {
    fetchTopics().then((data) => {
      console.log(data);
    });
  });

  const router = useRouter();
  // decodeURI 解码，decodeURIComponent 解码
  // console.log("🚀 ~ Index ~ router:", decodeURI(router.params.name ?? ""));
  console.log('🚀 ~ Index ~ router:', router.params.name);

  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    console.log('🚀 ~ useEffect ~ canvasRef.current:', canvasRef.current);
    const ctx = (canvasRef.current.firstChild as HTMLCanvasElement)?.getContext?.('2d');
    if (!ctx) return;
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 150, 75);
  }, []);

  const handleClick = () => {
    Taro.navigateTo({
      url: '/pages/detail/index?name=heyi',
    });
  };

  return (
    <View className="index">
      <Text>Hello world! 详情页</Text>
      <View className="components-page">
        <Icon type="success" />
      </View>
      <View className="components-page">
        <Progress percent={20} showInfo strokeWidth={2} />
        <Progress percent={40} strokeWidth={2} active />
        <Progress percent={60} strokeWidth={2} active />
        <Progress percent={80} strokeWidth={2} active activeColor="blue" />
      </View>
      <Navigator url="/pages/detail/index">跳转到详情页</Navigator>
      <Picker mode="time" onChange={(ev) => console.log(ev)}>
        <Button>选择时间</Button>
      </Picker>
      <Canvas ref={canvasRef} style="width: 300px; height: 200px;" canvasId="canvas" />
      <Button type="primary" onClick={handleClick}>
        按钮
      </Button>
    </View>
  );
}
